import styles from './index.module.css';

const CustomTable = ({columns, dataSource, warningKeys=[], processingKeys=[]}: {
    columns: {
        title: string,
        dataIndex: string,
        key: string,
        width: string,
        render?: (item: unknown, record: unknown) => JSX.Element | JSX.Element[] | string
    }[]
    dataSource: Record<string, string>[],
    warningKeys?: string[],
    processingKeys?: string[],
}) => {
    return (
        <div className={styles.customTable}>
            <ul className={styles.customTableHeader}>
                {columns.map(({key, title, width}) => {
                    return (<li key={key} style={{ width, padding: '0 0 0 2rem', boxSizing: 'border-box' }}>{title}</li>)
                })}
            </ul>
            <div className={styles.customTableBody}>
                {
                    dataSource.map(({key, ...rest}) => {
                        const isWarning = warningKeys.includes(key);
                        const isProcessing = processingKeys.includes(key);

                        return (
                            <ul
                                key={key}
                                className={styles.customTableBodyList}
                                data-warning={isWarning}
                                data-processing={isProcessing}
                            >
                                {columns.map(({key: columnKey, dataIndex, render, width}) => {
                                    return (
                                        <li key={columnKey} style={{ width, padding: '0 0 0 2rem', boxSizing: 'border-box' }}>
                                            {render ? render(rest[dataIndex], rest) : rest[dataIndex]}
                                        </li>
                                    )
                                })}
                            </ul>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default CustomTable